import { reactive, computed, watch } from 'vue'
import type { PropertyPanelProps, EventConfig } from '../types'
import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js'
import type { Moddle } from 'bpmn-moddle'

export function useEventConfig(props: PropertyPanelProps) {
  const eventConfig = reactive<EventConfig>({
    eventDefinitionType: '',
    messageName: '',
    signalName: '',
    timerDefinitionType: '',
    timerDefinition: '',
  })

  const showEventConfig = computed(() => {
    const type = props.currentElement?.type || ''
    return [
      'bpmn:StartEvent',
      'bpmn:IntermediateCatchEvent',
      'bpmn:IntermediateThrowEvent',
      'bpmn:EndEvent',
    ].includes(type)
  })

  const handleEventChange = () => {
    if (!props.currentElement || !props.modeler) return

    const modeling = props.modeler.get('modeling') as Modeling
    const moddle = props.modeler.get('moddle') as Moddle
    const eventDefinitions = []

    if (eventConfig.eventDefinitionType === 'message') {
      const messageRef = moddle.create('bpmn:Message', {
        name: eventConfig.messageName,
      })
      eventDefinitions.push(
        moddle.create('bpmn:MessageEventDefinition', {
          messageRef,
        }),
      )
    } else if (eventConfig.eventDefinitionType === 'signal') {
      const signalRef = moddle.create('bpmn:Signal', {
        name: eventConfig.signalName,
      })
      eventDefinitions.push(
        moddle.create('bpmn:SignalEventDefinition', {
          signalRef,
        }),
      )
    } else if (eventConfig.eventDefinitionType === 'timer') {
      const timerDefinition: Record<string, unknown> = {}
      const timeType = eventConfig.timerDefinitionType

      if (timeType) {
        timerDefinition[timeType] = moddle.create('bpmn:FormalExpression', {
          body: eventConfig.timerDefinition,
        })
      }

      eventDefinitions.push(moddle.create('bpmn:TimerEventDefinition', timerDefinition))
    }

    modeling.updateProperties(props.currentElement, {
      eventDefinitions,
    })
  }

  // 监听当前元素变化，更新配置
  watch(
    () => props.currentElement,
    (element) => {
      if (element && showEventConfig.value) {
        const eventDefinitions = element.businessObject.eventDefinitions || []
        if (eventDefinitions.length > 0) {
          const definition = eventDefinitions[0]
          if (definition.$type === 'bpmn:MessageEventDefinition') {
            eventConfig.eventDefinitionType = 'message'
            eventConfig.messageName = definition.messageRef?.name || ''
          } else if (definition.$type === 'bpmn:SignalEventDefinition') {
            eventConfig.eventDefinitionType = 'signal'
            eventConfig.signalName = definition.signalRef?.name || ''
          } else if (definition.$type === 'bpmn:TimerEventDefinition') {
            eventConfig.eventDefinitionType = 'timer'
            if (definition.timeDate) {
              eventConfig.timerDefinitionType = 'timeDate'
              eventConfig.timerDefinition = definition.timeDate.body || ''
            } else if (definition.timeDuration) {
              eventConfig.timerDefinitionType = 'timeDuration'
              eventConfig.timerDefinition = definition.timeDuration.body || ''
            } else if (definition.timeCycle) {
              eventConfig.timerDefinitionType = 'timeCycle'
              eventConfig.timerDefinition = definition.timeCycle.body || ''
            }
          }
        } else {
          eventConfig.eventDefinitionType = ''
          eventConfig.messageName = ''
          eventConfig.signalName = ''
          eventConfig.timerDefinitionType = ''
          eventConfig.timerDefinition = ''
        }
      }
    },
    { immediate: true },
  )

  return {
    eventConfig,
    showEventConfig,
    handleEventChange,
  }
}
